<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Je云桌面</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        /* 新增：设置 html 和 body 高度为 100% */
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        #app {
            height: calc(100% - 15px);
        }

        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            background-color: #f8f9fa;
            padding: 5px 10px;
            position: relative;
            z-index: 1000;
            cursor: move;
        }

        .navbar .title {
            font-size: 20px;
            font-weight: bold;
            color: #333;
        }

        .navbar .settings-icon {
            cursor: pointer;
            font-size: 24px;
            transition: transform 0.2s;
        }

        .navbar .settings-icon:hover {
            transform: scale(1.1);
        }

        .navbar .control-buttons {
            display: flex;
            gap: 10px;
        }

        .navbar .control-button {
            cursor: pointer;
            font-size: 20px;
            transition: transform 0.2s;
        }

        .navbar .control-button:hover {
            transform: scale(1.1);
        }

        .layout-container {
            display: flex;
            height: calc(100% - 40px);
            /* 修改：减去导航栏的高度 */
        }

        .sidebar {
            width: 150px;
        }

        .main-content {
            flex: 1;
            padding: 2px;
            height: 100%;
        }

        iframe {
            width: 100%;
            height: 100%;
            border: none;
        }

        /* 新增：菜单伸缩按钮样式 */
        .sidebar-toggle-button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 130px;
            /* 初始位置在菜单右侧 */
            cursor: pointer;
            font-size: 20px;
            transition: all 0.3s ease;
            z-index: 1001;
            background-color: white;
        }

        /* 当菜单收起时，按钮位置调整 */
        .sidebar-toggle-button.collapsed {
            left: 0px;
            /* 收起时按钮向右移动 */
        }

        /* 新增：应用列表样式 */
        .app-list {
            padding: 10px;
        }

        .app-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
            gap: 10px;
        }

        .app-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
            height: 70px;
        }

        .app-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        }

        .app-icon {
            width: 64px;
            height: 64px;
            border-radius: 8px;
            object-fit: cover;
        }

        .app-name {
            font-size: 14px;
            font-weight: bold;
            color: #333;
            text-align: center;
            white-space: nowrap;
            /* 确保文本不换行 */
            overflow: hidden;
            /* 隐藏超出部分 */
            text-overflow: ellipsis;
            /* 超出部分显示省略号 */
            max-width: 100px;
            /* 设置最大宽度 */
        }

        /* 优化：搜索框样式 */
        .el-input {
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .el-input__inner {
            padding-left: 30px;
            border: none;
        }

        .el-input__prefix {
            left: 10px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="navbar" @mousedown="startDrag" @mousemove="dragging" @mouseup="stopDrag" @mouseleave="stopDrag">
            <div class="navbar-icon">
                <img src="../static/icon/je.jpg" alt="Je云桌面图标" width="32" height="32">
                <span class="title">Je云桌面</span>
            </div>
            <div class="control-buttons">
                <span class="settings-icon" @click="openSetting">⚙️</span>
                <span class="control-button" @click="minimizeWindow">🗕</span>
                <span class="control-button" @click="maximizeWindow">🗖</span>
                <span class="control-button" @click="closeWindow">❌</span>
            </div>
        </div>
        <div class="layout-container">
            <el-menu class="sidebar" v-if="!isSidebarCollapsed" :default-active="0" text-color="black"
                active-text-color="#ffd04b">
                <el-menu-item :index="index+''" v-for="item,index in menuItems" @click="selectMenu(item.url)">
                    <span slot="title">{{item.title}}</span>
                </el-menu-item>
                <!-- 新增：应用列表菜单项 -->
                <el-menu-item index="10" @click="showAppList">
                    <span slot="title">应用</span>
                </el-menu-item>
            </el-menu>
            <span class="sidebar-toggle-button" :class="{ collapsed: isSidebarCollapsed }"
                @click="toggleSidebar">☰</span>
            <div class="main-content">
                <!-- 新增：应用列表 -->
                <div v-if="activeId==='10'" class="app-list">
                    <!-- 新增：应用搜索框 -->
                    <el-input v-model="searchQuery" placeholder="搜索应用" prefix-icon="el-icon-search"
                        style="margin-bottom: 10px;"></el-input>
                    <div class="app-grid">
                        <div class="app-item" v-for="app in filteredApps" @click="openApp(app.path)">
                            <!-- <img :src="app.icon" class="app-icon" alt="图标"> -->
                            <span class="app-name">{{ app.name }}</span>
                        </div>
                    </div>
                </div>
                <iframe v-else-if="!shouldOpenInBrowser(webUrl)" :src="webUrl" loading="lazy"></iframe>
            </div>
        </div>

        <el-dialog title="网站地址" :visible.sync="dialogVisible" width="30%">
            <el-input type="text" placeholder="请输入网站地址" v-model="webRootUrl"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" @click="closeModal()">取 消</el-button>
                <el-button size="mini" type="primary" @click="confirmUrl()">确 定</el-button>
            </span>
        </el-dialog>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                date: new Date(),
                dialogVisible: false,
                webRootUrl: 'http://localhost:81',
                webUrl: this.webRootUrl,
                menuItems: [
                    { title: '首页', url: '/' },
                    { title: '管理', url: '/manage' },
                    { title: '便签', url: '/memo' },
                    { title: '笔记', url: '/note' },
                    { title: '百度', url: 'http://www.baidu.com' },
                    { title: '谷歌', url: 'https://www.google.com' },
                    { title: 'yandex', url: 'https://yandex.com/' },
                ],
                isDragging: false,
                dragStartX: 0,
                dragStartY: 0,
                windowStartX: 0,
                windowStartY: 0,
                isSidebarCollapsed: true,
                activeId: '1',
                // 新增：应用列表数据
                apps: [],
                searchQuery: '',
            },
            computed: {
                filteredApps() {
                    return this.apps.filter(app => app.name.toLowerCase().includes(this.searchQuery.toLowerCase()));
                }
            },
            methods: {
                openSetting() {
                    this.dialogVisible = true
                },
                closeModal() {
                    this.dialogVisible = false
                },
                confirmUrl() {
                    this.webUrl = this.webRootUrl
                    this.activeId = 0
                    this.closeModal()
                },
                selectMenu(url) {
                    if (url === '/') {
                        this.getUrl()
                        this.isSidebarCollapsed = true
                        return
                    }
                    if (url.startsWith('http://') || url.startsWith('https://')) {
                        this.webUrl = url
                    } else {
                        this.webUrl = this.webRootUrl + url;
                    }
                    console.log(this.webUrl);
                    // 更新 activeId 为当前菜单索引
                    this.activeId = this.menuItems.findIndex(item => item.url === url).toString();
                },
                async getUrl() {
                    this.webRootUrl = "http://z8b9mdc.nat.ipyingshe.com"
                    this.webUrl = this.webRootUrl
                    return

                    // const url = 'https://gitee.com/uflearn/sync-address';
                    // axios({
                    //     url: url,
                    //     method: 'get',
                    // }).then(res => {
                    //     var text = res.data;
                    //     var regexp = 'http://[a-z|A-Z|0-9]*.natappfree.cc';
                    //     var match = text.match(regexp);
                    //     this.webRootUrl = match[0];
                    //     this.webUrl = this.webRootUrl
                    //     console.log(this.webUrl);
                    //     sessionStorage.removeItem(this.webUrl, "Admin-Token");
                    // }).catch(err => {
                    //     console.log(err);
                    // });
                },
                minimizeWindow() {
                    window.electronAPI.send('window-minimize');
                },
                maximizeWindow() {
                    window.electronAPI.send('window-maximize');
                },
                closeWindow() {
                    window.electronAPI.send('window-close');
                },
                startDrag(event) {
                    this.isDragging = true;
                    this.dragStartX = event.clientX;
                    this.dragStartY = event.clientY;
                    window.electronAPI.send('get-window-position');
                },
                dragging(event) {
                    if (this.isDragging) {
                        const offsetX = event.clientX - this.dragStartX;
                        const offsetY = event.clientY - this.dragStartY;
                        window.electronAPI.send('window-drag', { offsetX, offsetY });
                    }
                },
                stopDrag() {
                    this.isDragging = false;
                },
                toggleSidebar() {
                    this.isSidebarCollapsed = !this.isSidebarCollapsed;
                },
                // 新增：显示应用列表
                showAppList() {
                    // this.isSidebarCollapsed = true;
                    this.fetchApps();
                    // 更新 activeId 为应用列表索引
                    this.activeId = '10';
                },
                // 新增：获取本地应用列表
                async fetchApps() {
                    try {
                        const apps = await window.electronAPI.invoke('get-apps');
                        this.apps = apps;
                        console.log('应用列表:', apps);
                    } catch (error) {
                        console.error('获取应用列表失败:', error);
                    }
                },
                // 新增：打开应用
                openApp(appPath) {
                    this.$message.success('正在打开应用');
                    window.electronAPI.send('open-app', appPath);
                },
                shouldOpenInBrowser(url) {
                    const blockedSites = ['yandex.com', 'google.com'];
                    let open = blockedSites.some(site => url.includes(site));
                    if (open) {
                        this.openApp(url)
                    }
                    return open
                },
            },
            created() {
                this.getUrl();
                // 初始化时获取应用列表
                this.fetchApps();
            }
        });
    </script>
</body>

</html>